<template>
  <div>
    <el-col :span="24" class="topbar-wrap">
      <div class="left">
        <img src="../../../static/img/logo.png" alt="随意钱包">
      </div>
      <div class="right">
        <div class="topbar-title">
          <!--后台管理系统-->
        </div>
        <div class="topbar-account topbar-btn">
          <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner">
            <span style="letter-spacing: 3px;">欢迎您！</span>{{sysUserName}}
            <i class="el-icon-caret-bottom"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <router-link :to="'/changePass'"><span style="color: #555;">修改密码</span></router-link>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-col>
  </div>
</template>

<script type="text/ecmascript-6">
  import {delCookie} from "@/utils/utils";
  export default {
    data() {
      return {
        sysUserName: ''
      }
    },
    methods: {
      logout(){
        let _this = this;
        this.$confirm('确认退出吗?', '提示', {
          type: 'warning'
        }).then(() => {
          delCookie('token');
          delCookie('X-Auth-Token');
          localStorage.removeItem('Auth');
          localStorage.removeItem('userName');
          _this.$router.push('/');
        }).catch(() => {

        });
      }
    },
    mounted() {
      this.sysUserName = localStorage.getItem('userName');
    }
  }
</script>

<style lang='scss' scoped>
  .topbar-wrap {
    height: 60px;
    background: #373d41;
    display: flex;
    .left {
      width: 180px;
      background-color: #373d41;
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .topbar-title {
        color: #fff;
        margin-left: 10px;
      }
      .topbar-account {
        margin-right: 50px;
        color: #fff;
        .el-dropdown-link {
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
</style>
